
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>淘饭饭注册</title>
    <style>
        .bg{
            position: fixed;
            width: 80%;
            /*height: 30%;*/
            left: 10%;
            bottom:15%
        }



        .input-inline {
            width: 80%;
            margin-bottom: 8px;
            position: relative
        }

        .input-inline input {
            opacity: 1;
            border: 1px solid #e3e3e3;
            border-radius: 10px;
            outline: 0;
            margin-left: 119px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            padding-left: 42px;
            position: relative;
            left: 4%;
            top: 2%;
        }

        .input-inline input:focus {
            border: 1px solid #10c55b
        }

        .btn-captcha {
            position: absolute;
            top: 40%;
            right: 0;
            width: 100px;
            height: 40px;
            line-height: 40px;
            vertical-align: -1px;
            background-color: #10c55b!important;
            text-align: center;
            font-family: "Microsoft YaHei";
        }
        .btn-sub {
            position: relative;
            right: 0;
            height: 40px;
            line-height: 40px;
            vertical-align: -1px;
            background-color: #10c55b!important;
            text-align: center;
            font-family: "Microsoft YaHei";
            left: 5%;
            width:115%;
            border-radius: 10px;
        }
        .code{
            width: 30%;
        }

        .sure{
            position: fixed;
            top: 20%;
            left: 40%;
            height: 100px;
            width: 100px;
            text-align: center;
            vertical-align: center;
            color: white;
        }

        .black{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.5;
            border-radius: 10px;
        }
        .white{
            position: absolute;
            color: white;
            top: 40%;
        }
    </style>

    <script type="text/javascript" src="./jQuery.js"></script>

    <script>
        var isVertifySucc = false;
        window.onload = function() {

            var clientHeight = document.documentElement.clientHeight
            var clientWidth = document.documentElement.clientWidth


            var bgImage = document.getElementById("bgImage")
            bgImage.style.height =  clientHeight + 'px';
            bgImage.style.width =   clientWidth +'px';
            if(window.localStorage.phoneCode){
                var codeTime =  setInterval(function () {
                    var textValue =  60 -Math.floor((new Date().getTime() - window.localStorage.phoneCode)/1000)
                    if(textValue <=  0){
                        clearInterval(textValue)
                        console.log("")
                        textValue = "获取验证码"
                    }
                    $("#getCode").text(textValue)
                },1000)
            }
        }



        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
        }

        function getPhoneCode() {
            var phone = document.getElementById("phone").value
            if(phone.length != 11){
                $("#codeMsg").html("电话号码不对")
                $("#phonecode").css("display","")

                setTimeout(function () {
                    $("#phonecode").css("display","none")
                },500)
                return
            }

            if(window.localStorage.phoneCode){
                if(new Date().getTime() - window.localStorage.phoneCode < 60 * 1000){
                    return
                }
            }
            window.localStorage.phoneCode = new Date().getTime()

            let url = "/v01/account/getCode?phone=" + phone + "&sign=" + phone + "&MacId=" + phone ;

            $.get(url,function(data,status){
                console.log("Data: " + data + "nStatus: " + status);
                $("#getCode").text(60)
                var valueCode = setInterval(function () {
                    var text =  60 -Math.floor((new Date().getTime() - window.localStorage.phoneCode)/1000)
                    if(text <= 0){
                        clearInterval(text)
                        text = "获取验证码"
                    }
                    $("#getCode").text(text)
                },1000)

                if(typeof  data == "string"){
                    data = JSON.parse(data)
                }
                if(data.code == 200){
                    $("#codeMsg").html("短信发送成功")
                    $("#phonecode").css("display","")

                }

                setTimeout(function () {
                    $("#phonecode").css("display","none")
                },500)
            });
        }
        function onSubmintPhone() {
            var phone = document.getElementById("phone").value
            var captcha = document.getElementById("captcha").value
            var passWd = document.getElementById("passWd").value
            console.log("phone",phone)
            console.log("captcha",captcha)
            console.log("passWd",passWd)
            if(!phone){
                alert("请输入手机号")
                return
            }else if(!captcha){
                alert("请输入验证码")
                return
            }else if(!passWd){
                alert("请输入密码")
                return
            }
            let shareId = GetQueryString("phone")
            let url = "/v01/account/register?phone=" + phone + "&code=" + captcha + "&passWd=" + passWd + "&shareId=" + shareId + "&MacId=MacId";

            $.get(url,function(data,status){
                //
                if(typeof  data == "string"){
                    data = JSON.parse(data)
                }
                if(data.code == 200){
                    alert("注册成功")
                    window.location.href = "https://www.coolapk.com/apk/203933";
                }else {
                    alert("注册失败:" + data.msg)
                }
            });

        }
    </script>

</head>

<body style="margin: 0px;">
<image id="bgImage" src ='./share.png' style="width: 100%;height: 100%">
    <div class="bg" >

        <div style="height: 100%;width: 100%;position: absolute;background-color: black;opacity: 0.5;  border-radius: 20px;padding: 5% 0 0 0;;top:-5%">

        </div>
        <div class="input-inline captcha">
            <input id="phone" maxlength="11" style="margin-left:0px;" type="text" tyle="margin-left:0px;opacity:1" autocomplete="off" placeholder="请输入常用手机号">
        </div>

        <div class="input-inline captcha">
            <input id="passWd" maxlength="11" style="margin-left:0px;" type="text" tyle="margin-left:0px;" autocomplete="off" placeholder="请输入密码">
        </div>


        <div class="input-inline captcha">
            <input id="captcha" maxlength="6" style="margin-left:0px;width: 50%" type="text" autocomplete="off" placeholder="请输入验证码">
            <div class="btn-captcha qt-btn btn-green " style="border-radius:10px;position: absolute;top: 5%; right: -15%; width: 40%"  onclick="getPhoneCode()"><a id="getCode" class="statis" site="1"> 获取验证码</a></div>
        </div>

        <div class="input-inline captcha" onclick="onSubmintPhone()">
            <div class="btn-sub   " style=""><a class="statis" site="1"> 注册</a></div>
        </div>

        <div class="sure" id="phonecode" style="display:none" >
            <div class="black">
s
            </div>
            <div id="codeMsg" class="white">
                短信发送成功
            </div>

        </div>
    </div>

    </div>
</image>
</body>
</html>
